<template>
  <div class="parent">
    <h2>父组件</h2>
    <p>父组件接收到的数据: {{ childData }}</p>
    <ChildComponent 
      :parentMessage="t" 
      @child-event="handleChildEvent"
    />
    <button @click="updateParentMessage">更新父组件消息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './zi.vue';

// 父组件向子组件传递的数据
const t = ref('');

// 父组件接收子组件发送的数据
const childData = ref('');

// 子组件触发的事件
const handleChildEvent = (data) => {
  childData.value = data;
  // childData.value = 'data发送';
};

// 父组件自身的事件
const updateParentMessage = () => {
  // t.value = '更新父组件消息!';
  childData.value = 'data';
};




</script>

<style scoped>
.parent {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px;
}
</style>